import { Module, ActionContext } from 'vuex'
import { RootStateTypes, StateThemeConfigModule } from '../interface/index'
import {
  ModuleState,
  ModuleGetters,
  ModuleActions,
  ModuleMutations
} from '../hooks';

const state: StateThemeConfigModule = {
  /*  --------- 界面设置  --------- */
  // 网站主标题（菜单导航、浏览器当前网页标题）
  globalTitle: 'Lve模板',
  // 是否开启侧边栏 Logo
  showLogo: true,
  // 默认主页面切换动画，可选 1、 slide-right 2、 slide-left 3、 opacitys
  animation: 'slide-right',
  // 默认布局，可选 1、默认 defaults 2、经典 classic 3、横向 transverse 4、分栏 columns
  layout: 'defaults',
  // 是否展示logo
  isShowLogo: false,
  // 默认菜单导航背景颜色，请注意：需要同时修改 `/@/styles/var.scss` 对应的值
  menuBarBgColor: '#304156',
  // 左侧导航栏背景颜色
  sideBarBgColor: '#304156',
  logoBgColor: '#2b2f3a',
  // 是否开启 TagsView 缓存
  isCacheTagsView: false,
  // 是否开启菜单手风琴效果
  isUniqueOpened: false,
  // 是否开启 Tagsview 图标
  isTagsviewIcon: false,
  // 侧边栏是否收缩
  isCollapse: false
}

const getters = {
  globalTitle: (state: StateThemeConfigModule) => state.globalTitle,
  showLogo: (state: StateThemeConfigModule) => state.showLogo,
  logoBgColor: (state: StateThemeConfigModule) => state.logoBgColor,
  isCollapse: (state: StateThemeConfigModule) => state.isCollapse
}

const mutations = {
  /** 设置布局配置 */
  getThemeConfig(state: StateThemeConfigModule, data: string) {
    state.layout = data
  },
  /** 设置侧边栏展开状态 */
  setCollapse(state: StateThemeConfigModule) {
    state.isCollapse = !state.isCollapse
  }
}

const actions = {
  /** 设置布局配置 */
  setThemeConfig({ commit }: ActionContext<StateThemeConfigModule, RootStateTypes>, data: object) {
    commit('getThemeConfig', data)
  }
}

type stateKey = typeof state
export type ThemeConfigState = ModuleState<stateKey>
type gettersKey = typeof getters
export type ThemeConfigGetters = ModuleGetters<gettersKey>
type mutationKey = typeof mutations
export type ThemeConfigMutations = ModuleMutations<mutationKey>
type actionKey = typeof actions
export type ThemeConfigActions = ModuleActions<actionKey>

const themeConfigModule: Module<StateThemeConfigModule, RootStateTypes> = {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

export default themeConfigModule
